<template>
  <main class="content-child">
    <h2>卡片布局</h2>
    <right class="right_component" :data="data"></right>
  </main>
</template>
<script>
import Right from "../components/Right";
export default {
  name: "Buttons",
  components: {
    Right,
  },
  data() {
    return {
      msg: [
        {
          name: "123",
        },
      ],
      data: [
        {
          name: "样式一",
          time: "0.2",
          img: "../../static/images/card/1.png",
          code: `
          <ion-card>
            <ion-card-header>
              标题
            </ion-card-header>

            <ion-card-content>
              <!-- 添加内容 -->
            </ion-card-content>

          </ion-card>`,
        },
        {
          name: "样式二",
          time: "0.5",
          img: "../../static/images/card/2.png",
          code: `
            <ion-card>
              <ion-card-header>
                标题
              </ion-card-header>

              <ion-list>
                <button ion-item>
                  <ion-icon name="cart" item-start></ion-icon>
                  Shopping
                </button>

                <button ion-item>
                  <ion-icon name="medical" item-start></ion-icon>
                  Hospital
                </button>

                <button ion-item>
                  <ion-icon name="cafe" item-start></ion-icon>
                  Cafe
                </button>

                <button ion-item>
                  <ion-icon name="paw" item-start></ion-icon>
                  Dog Park
                </button>

                <button ion-item>
                  <ion-icon name="beer" item-start></ion-icon>
                  Pub
                </button>

                <button ion-item>
                  <ion-icon name="planet" item-start></ion-icon>
                  Space
                </button>

              </ion-list>
            </ion-card>`,
        },{
          name: "样式三",
          time: "0.2",
          img: "../../static/images/card/3.png",
          code: `
            <ion-content class="card-background-page">
              <ion-card>
                <img src="图片地址"/>
                <div class="card-title">图片文字一</div>
                <div class="card-subtitle">图片文字二</div>
              </ion-card>

              <ion-card>
                <img src="图片地址"/>
                <div class="card-title">图片文字一</div>
                <div class="card-subtitle">图片文字二</div>
              </ion-card>
            </ion-content>
            <style>
              .card-background-page {

              ion-card {
                position: relative;
                text-align: center;
              }

              .card-title {
                position: absolute;
                top: 36%;
                font-size: 2.0em;
                width: 100%;
                font-weight: bold;
                color: #fff;
              }

              .card-subtitle {
                font-size: 1.0em;
                position: absolute;
                top: 52%;
                width: 100%;
                color: #fff;
              }

            }
          </style>
            `,
        },{
          name: "样式四",
          time: "1",
          img: "../../static/images/card/4.png",
          code: `
            <ion-card>
              <ion-item>
                <ion-avatar item-start>
                  <img src="img/marty-avatar.png">
                </ion-avatar>
                <h2>名字</h2>
                <p>时间</p>
              </ion-item>

              <img src="头像地址">

              <ion-card-content>
                <p>内容</p>
              </ion-card-content>

              <ion-row>
                <ion-col>
                  <button ion-button icon-start clear small>
                    <ion-icon name="thumbs-up"></ion-icon>
                    <div>12 点赞</div>
                  </button>
                </ion-col>
                <ion-col>
                  <button ion-button icon-start clear small>
                    <ion-icon name="text"></ion-icon>
                    <div>4 回复</div>
                  </button>
                </ion-col>
                <ion-col align-self-center text-center>
                  <ion-note>
                    11h ago
                  </ion-note>
                </ion-col>
              </ion-row>

            </ion-card>
            `,
        },
      ],
    };
  },
};
</script>
<style scoped lang="less">
.content-child {
  text-align: left;
  width: 800px;
}
.right {
  padding-left: 1rem;
}
</style>
